<template>
    <Form :model="formTop" label-position="top">
        <FormItem label="类型">
            <Input v-model="formTop.type"></Input>
        </FormItem>
        <FormItem label="价格">
            <Input v-model="formTop.price"></Input>
        </FormItem>
        <FormItem label="产品名">
            <Input v-model="formTop.product"></Input>
        </FormItem>
        <FormItem label="生产地">
            <Input v-model="formTop.place"></Input>
        </FormItem>
        <Button @click='handleSubmit'>添加</Button>
    </Form>
    
</template>
<script>
    export default {
        data () {
            return {
                formTop: {
                    type: '',
                    price: '',
                    product: '',
                    place: '',
                }
            }
        },
        methods:{
            handleSubmit (name) {
                if(this.formTop.type=='手机'||this.formTop.type=='图书'||this.formTop.type=='服装'){
                        // ajax数据请求
                        this.$http({
                          method: 'post',
                          url:'http://10.31.153.25:3000/product/data',
                          data: this.formTop
                        }).then(res=>{
                         // this.getData();
                          this.$Message.success('Success!');

                         // 重置form表单内容为数据的初始值状态
                         // ********** 非常重要
                         Object.assign(this.$data.formTop, 
                         this.$options.data().formTop);
                        })
                }
                   else{
                      this.$Message.error('添加失败，请添加类型为手机，图书，服装的商品'); 
                   }     
                }
            },
    }
</script>
<style>
    Form{
        margin-top:20px;
    }
    
</style>